<template>
    <div class="flex justify-between items-center flex-wrap">
      <div class="flex flex-col justify-center items-center shadow-basic" m="auto" w="46">
        <div class="inline-flex shadow-box" h="30" w="30" m="2"></div>
        <span p="y-4" class="demo-shadow-text" text="sm">Basic Shadow</span>
        <code text="xs">--el-box-shadow</code>
      </div>
  
      <div class="flex flex-col justify-center items-center shadow-light" m="auto" w="46">
        <div class="inline-flex shadow-box" h="30" w="30" m="2"></div>
        <span p="y-4" class="demo-shadow-text" text="sm">Light Shadow</span>
        <code text="xs">--el-box-shadow-light</code>
      </div>
  
      <div class="flex flex-col justify-center items-center shadow-lighter" m="auto" w="46">
        <div class="inline-flex shadow-box" h="30" w="30" m="2"></div>
        <span p="y-4" class="demo-shadow-text" text="sm">Lighter Shadow</span>
        <code text="xs">--el-box-shadow-lighter</code>
      </div>
  
      <div class="flex flex-col justify-center items-center shadow-dark" m="auto" w="46">
        <div class="inline-flex shadow-box" h="30" w="30" m="2"></div>
        <span p="y-4" class="demo-shadow-text" text="sm">Dark Shadow</span>
        <code text="xs">--el-box-shadow-dark</code>
      </div>
    </div>
  </template>
  

<script>
import { ref } from 'vue';
import axios from 'axios';
</script>

<style scoped>
.shadow-box {
  width: 30px;
  height: 30px;
  margin: 2px;
  background-color: #fff;
}

.shadow-basic {
  --el-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  box-shadow: var(--el-box-shadow);
}

.shadow-light {
  --el-box-shadow-light: 0 1px 5px rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.06);
  box-shadow: var(--el-box-shadow-light);
}

.shadow-lighter {
  --el-box-shadow-lighter: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  box-shadow: var(--el-box-shadow-lighter);
}

.shadow-dark {
  --el-box-shadow-dark: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
  box-shadow: var(--el-box-shadow-dark);
}

.demo-shadow-text {
  padding: 4px 0;
  font-size: 0.875rem; /* Small text */
}

code {
  font-size: 0.75rem; /* Extra small text */
}
</style>
